<html>
<body>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<div id="text"></div>
<script>
var TextComponent=React.createClass({  

//propTypes的值直接就是一个对象形式
propTypes:{
text:React.PropTypes.string.isRequired,
},

getDefaultProps:function(){
return {text:'我是默认值',};
},

getInitialState:function(){  //给组件设置初始的state,保证任何时候都能取得state.
return {
textState:this.props.text,
}
},

_textChange:function(e){ //当数据改变时，获取这种改变，然后更新界面。
this.setState({
textState:e.target.value,
});
},

render:function(){  
return React.DOM.div(null,
React.DOM.input({
 value:this.state.textState,
 onChange:this._textChange,
 }),React.DOM.h1(null,this.state.textState.length) 
);
},

});
//输出组件，生成react应用
ReactDOM.render(
React.createElement(TextComponent,{  
text:"hello,我是text",//这里在使用组件时只能传入在、props属性与事件，而不能传入state状态，状态只能通过传入的props来间接设置
}),
document.getElementById("text") //这个参数只有在应用的最外层才有，组件里面是没有这个参数的
);
</script>

</body>
</html>

